import React from 'react';
import { Card } from 'antd';
import { Link } from 'react-router-dom';
import '../CSS/NewComments.less';

interface NewCommentCardProps{
    newComments: NewComments[];
}

interface LabelProps{
    title: string;
    blogId: string;
    nickname: string;
    website: string;
}

function NewCommentsLabel(props: LabelProps) {
    const { title, blogId, website, nickname } = props;

    return (
        <p className="recent-comments-container">
            <a href={website || '#'} target="_blank" rel="noreferrer" className="label-nickname">
                {nickname}
            </a><span> 评论了：</span>
            <br />
            <Link to={`/content/${blogId}`} className="label-title">《{title}》</Link>
        </p>
    );
}

function NewCommentCard(props: NewCommentCardProps) {
    const { newComments } = props;

    return (
        <Card title="最新评论" bordered={false}>
            {newComments.length && newComments.map((comment) => (
                <NewCommentsLabel
                    key={comment._id}
                    title={comment.blogTitle}
                    blogId={comment.blogId}
                    nickname={comment.nickname}
                    website={comment.website}
                />
            ))}
        </Card>
    );
}

export default NewCommentCard;
